<html>
  <head>
    <style type="text/css">
      .slideSign{
        color:#f00;
      }
      .slideDiv{
        display:none;
      }
    </style>
    <script src="/static/jquery.min.js">
    </script>
    <script src="/static/jquery.js">
    </script>
    <script>
    <!--
      $(do
	cument)
			.ready(
					function() {
						var idCount = 0;
						var vote = 0;
						var data = [];
						var order = new Array();

						// Add a new topic
						$(".addTopic")
								.click(
										function() {
											if ($(".newLink").val() == ''
													|| $(".newMessage").val() == '') {
												alert("You need to fill in all the required information!");
												return;
											}
											;
											idCount++;
											order.push(idCount);
											var link = $(".newLink").val();
											var months = [ 'Jan', 'Feb', 'Mar',
													'Apr', 'May', 'Jun', 'Jul',
													'Aug', 'Sep', 'Oct', 'Nov',
													'Dec' ];
											var timestamp = new Date()
													.getTime();
											var time = new Date(timestamp);
											var year = time.getFullYear();
											var month = months[time.getMonth()];
											var date = time.getDate();
											var hour = time.getHours();
											var min = time.getMinutes();
											var sec = time.getSeconds();
											var curTime = date + ', ' + month
													+ ' ' + year + ' ' + hour
													+ ':' + min + ':' + sec;
											var msg = $(".newMessage").val();
											var tData = {
												id : idCount,
												posttime : curTime,
												point : 0,
												parent : 0,
												content : msg,
												website : link
											};
											data.push(tData);
											var jase = JSON.stringify(tData);
											$.ajax({
												type : "POST",
												url : '/addTopic',
												data : jase,
												success : function(result) {
													$(".container").append(
															$(result));
												}
											});
											$(".newMessage").val("");
											$(".newLink:text").val("http://");
										});

						// Expand/Collapse
						$(".container").on(
								'click',
								'.expand',
								function() {
									$(
											"#" + this.id.slice(0, -6)
													+ "slideContent")
											.slideToggle('fast');
									$(
											"#" + this.id.slice(0, -6)
													+ "slideContent")
											.toggleClass('slideSign');
									return false;
								});

						// Show Reply box
						$(".container").on(
								'click',
								'.showReply',
								function() {
									$(
											"#" + this.id.slice(0, -9)
													+ "expandReplyBox")
											.slideToggle('fast');
									$(
											"#" + this.id.slice(0, -9)
													+ "expandReplyBox")
											.toggleClass('slideSign');
									return false;
								});

						// Add Comment
						$(".container")
								.on(
										'click',
										'.addReply',
										function() {
											if ($(
													"#" + this.id.slice(0, -8)
															+ "replyMsg").val() == '') {
												alert("You need to fill in all the required information!");
												return;
											}
											;
											idCount++;
											order.push(idCount);
											var months = [ 'Jan', 'Feb', 'Mar',
													'Apr', 'May', 'Jun', 'Jul',
													'Aug', 'Sep', 'Oct', 'Nov',
													'Dec' ];
											var timestamp = new Date()
													.getTime();
											var time = new Date(timestamp);
											var year = time.getFullYear();
											var month = months[time.getMonth()];
											var date = time.getDate();
											var hour = time.getHours();
											var min = time.getMinutes();
											var sec = time.getSeconds();
											var curTime = date + ', ' + month
													+ ' ' + year + ' ' + hour
													+ ':' + min + ':' + sec;
											var msg = $(
													"#" + this.id.slice(0, -8)
															+ "replyMsg").val();
											var tData = {
												id : idCount,
												posttime : curTime,
												point : 0,
												parent : this.id.slice(0, -8),
												content : msg
											};
											data.push(tData);
											var jase = JSON.stringify(tData);
											$.ajax({
												type : "POST",
												url : '/addReply',
												data : jase,
												success : function(result) {
													$("#" + tData.parent)
															.append($(result));
												}
											});

											$(
													"#" + this.id.slice(0, -8)
															+ "replyMsg").val(
													'');
											$(
													"#" + this.id.slice(0, -8)
															+ "showReply")
													.click();
										});

						// Like
						$(".container")
								.on(
										'click',
										'.up',
										function() {
											// Update value
											var index = -1;
											for ( var i = 0; i < data.length; i++) {
												if (order[i] == this.id.slice(
														0, -2)) {
													index = i;
												}
											}
											var likes = data[index].point + 1;
											var thisrecord = $(this).closest(
													"div");
											thisrecord.find("span").html(
													likes + " points");
											data[index].point++;

											ancIndex = index;
											//alert(ancIndex);
											//alert(data[ancIndex].parent);
											while (data[ancIndex].parent != 0) {
												for ( var i = 0; i < data.length; i++) {
													if (order[i] == data[ancIndex].parent) {
														ancIndex = i;
													}
												}
											}

											var parentPoint = data[ancIndex].point + 1;
											var parentRecord = $(
													"#" + data[ancIndex].id)
													.closest("div");
											data[ancIndex].point++;
											alert("parent=" + data[ancIndex].id);
											alert("point="
													+ data[ancIndex].point);

											// Sort Replies
											data.sort(SortByPoint);

											order = [];
											for ( var i = 0; i < data.length; i++) {
												order.push(data[i].id);
											}
											;
											alert(order);

											for ( var i = 0; i < order.length; i++) {
												if (order[i] == this.id.slice(
														0, -2)) {
													index = i;
												}
											}

											while (data[ancIndex].parent != 0) {
												for ( var i = 0; i < data.length; i++) {
													if (order[i] == data[ancIndex].parent) {
														ancIndex = i;
													}
												}
											}

											for ( var i = 1; i < order.length; i++) {
												if (data[order[i] - 1].parent == 0
														&& data[order[i - 1] - 1].parent == 0) {
													$("#" + order[i])
															.insertAfter(
																	"#"
																			+ order[i - 1]);
												} else if (data[order[i] - 1].parent == data[index].parent
														&& data[order[i - 1] - 1].parent == data[index].parent) {
													$("#" + order[i])
															.insertAfter(
																	"#"
																			+ order[i - 1]);
												}
											}
										});

						function SortByPoint(x, y) {
							if (x.parent == y.parent) {
								return y.point - x.point;
							} else {
								return 0;
							}
							;
						}
					});
</script>
  </head>
  
  <body>
    <div class="container" style='background-color:#E0F2F7;width:750'></div>
    <div id=bg style="background-color:#E0F2F7;width:750">
    <textarea id=0newMsg class="newMessage" maxlength="140" rows="4" cols="50" placeholder="Type your message here."></textarea>
    <br/>
    <input id=0newLink class="newLink" type="text" size="25" cols="50" value="http://">
    <button class="addTopic">Start a New Topic</button>
    </div>
  </body>
  
</html>